<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OSS管理页</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./css/oss.css">
    <link rel="stylesheet" href="./css/select.css">
</head>
<body>
<h1 id="title">OSS管理页</h1>
<div class="main">
    <div class="oss-form">
<!--        <form action="/storage/updateStorageSetting" method="post" enctype="multipart/form-data">-->
<!--        这里不使用form表单，使用ajax提交-->
        <form>
            <ul>
                <li>
                    <h2 class="oss-title">存储服务配置</h2>
                </li>
                <li>
                    <table>
                        <tbody>
                        <tr>
                            <td>
                                <label for="storage">
                                    <span>存储服务</span>
                                </label>
                            </td>
                            <td>
                                <div id="box">
                                    <div id="select" onclick="showOption()">
                                        <label>
                                            <input id="storage" type="text" placeholder="请选择" readonly="readonly"/>
                                        </label>
                                        <span style="width: 30px">
                                            <svg t="1706513472258" class="s-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1429" width="16" height="16"><path d="M511.9 819c-21.7 0-43.4-8.3-59.9-24.8-33.1-33.1-33.1-86.7 0-119.8l363.5-344.7c33.1-33.1 86.7-33.1 119.8 0s33.1 86.7 0 119.8L571.7 794.2c-16.5 16.6-38.2 24.8-59.8 24.8z" fill="#666666" p-id="1430"></path><path d="M512.1 819c21.7 0 43.4-8.3 59.9-24.8 33.1-33.1 33.1-86.7 0-119.8L208.5 329.8c-33.1-33.1-86.7-33.1-119.8 0s-33.1 86.7 0 119.8l363.5 344.7c16.6 16.5 38.3 24.7 59.9 24.7z" fill="#666666" p-id="1431"></path></svg>
                                        </span>
                                    </div>
                                    <ul id="option">
                                    </ul>
                                </div>
                                <script>
                                    let flag = false;
                                    let storageList = [];
                                    function getStorageList() {
                                        let storage = document.getElementById('option');
                                        let select = document.getElementById('select');
                                        let input = select.getElementsByTagName('input')[0];
                                        axios.get('/storage/list').then(res => {
                                            const {data} = res.data;
                                            storageList = data;
                                            for (let i = 0; i < data.length; i++) {
                                                let option = document.createElement('li');
                                                option.value = data[i].storage;
                                                option.innerText = data[i].storageName;
                                                option.onclick = function () {
                                                    input.value = option.innerText;
                                                    Array.from(storage.getElementsByTagName('li')).forEach(function (item) {
                                                        if (item.innerText === option.innerText) {
                                                            item.classList.add('background-mask');
                                                        } else {
                                                            item.classList.remove('background-mask');
                                                        }
                                                    });
                                                    getStorageInfo(option.innerText);
                                                    leaveOption();
                                                }
                                                option.style.backgroundImage = 'url(' + data[i].icon + ')';
                                                storage.appendChild(option);
                                            }
                                        }).catch(error => {
                                            console.error(error);
                                        });
                                    }
                                    getStorageList();
                                    function leaveOption() {
                                        let option = document.getElementById('option');
                                        option.style.display = 'none';
                                        let svg = document.getElementsByClassName('s-icon')[0];
                                        svg.style.transform = 'rotate(0deg)';
                                        flag = false;
                                    }
                                    function overOption() {
                                        let option = document.getElementById('option');
                                        option.style.display = 'block';
                                        let svg = document.getElementsByClassName('s-icon')[0];
                                        svg.style.transform = 'rotate(180deg)';
                                        flag = true;
                                    }
                                    function showOption() {
                                        if (flag) {
                                            leaveOption();
                                        } else {
                                            overOption();
                                        }
                                    }
                                    function getStorageInfo(storageName) {
                                        let storage = '';
                                        for (let i = 0; i < storageList.length; i++) {
                                            if (storageList[i].storageName === storageName) {
                                                storage = storageList[i].storage;
                                            }
                                        }
                                        axios.get('/storage/getStorageInfo', {
                                            params: {
                                                storage: storage
                                            }
                                        }).then(res => {
                                            const {data} = res.data;
                                            let select = document.getElementById('select');
                                            let input = select.getElementsByTagName('input')[0];
                                            input.value = data.storageName;
                                            select.style.backgroundImage = 'url(' + data.icon + ')';
                                            document.getElementById('endpoint').value = data.endpoint;
                                            document.getElementById('host').value = data.host;
                                            document.getElementById('accessKey').value = data.accessKey;
                                            document.getElementById('secretKey').value = data.secretKey;
                                            document.getElementById('bucketName').value = data.bucketName;
                                        }).catch(error => {
                                            console.error(error);
                                        });
                                    }
                                    // 方法四 使用 addEventListener 来添加事件监听器而不是直接在 document 对象上设置 onclick 属性。
                                    document.addEventListener('click', function (event) {
                                        const target = event.target;
                                        if (!target.closest('#box')) {
                                            leaveOption();
                                        }
                                    });
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="endpoint">
                                    <span>存储服务API地址</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" class="input" name="endpoint" id="endpoint" placeholder="存储服务API地址">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="host">
                                    <span>服务的外链访问地址</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" class="input" name="host" id="host" placeholder="服务的外链访问地址">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="accessKey">
                                    <span>访问账户</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" class="input" name="accessKey" id="accessKey" placeholder="访问账户">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="secretKey">
                                    <span>访问密钥</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" class="input" name="secretKey" id="secretKey" placeholder="访问密钥">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="bucketName">
                                    <span>存储桶名称</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" class="input" name="bucketName" id="bucketName" placeholder="存储桶名称">
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td>
<!--                                <input type="submit" name="submit" value="提交" />-->
                                <div class="button" onclick="updateStorageSetting()">更新配置</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </li>
            </ul>
        </form>
    </div>
</div>
<script type="text/javascript">
    // window.onload 方法会在页面加载完成后执行
    window.onload = function () {
        getStorageSetting();
    }
    function updateStorageSetting() {
        let storage = '';
        for (let i = 0; i < storageList.length; i++) {
            if (storageList[i].storageName === document.getElementById('storage').value) {
                storage = storageList[i].storage;
            }
        }
        let endpoint = document.getElementById('endpoint').value;
        let host = document.getElementById('host').value;
        let accessKey = document.getElementById('accessKey').value;
        let secretKey = document.getElementById('secretKey').value;
        let bucketName = document.getElementById('bucketName').value;
        axios.post('/storage/updateStorageSetting', {
            storage: storage,
            endpoint: endpoint,
            host: host,
            accessKey: accessKey,
            secretKey: secretKey,
            bucketName: bucketName
        }).then(res => {
            console.log(res);
        }).catch(error => {
            console.error(error);
        });
    }
    function getStorageSetting() {
        axios.get('/storage/getStorageSetting').then(res => {
            const {data} = res.data;
            let select = document.getElementById('select');
            let input = select.getElementsByTagName('input')[0];
            input.value = data.storageName;
            select.style.backgroundImage = 'url(' + data.icon + ')';
            document.getElementById('endpoint').value = data.endpoint;
            document.getElementById('host').value = data.host;
            document.getElementById('accessKey').value = data.accessKey;
            document.getElementById('secretKey').value = data.secretKey;
            document.getElementById('bucketName').value = data.bucketName;
        }).catch(error => {
            console.error(error);
        });
    }
</script>
</body>
</html>